import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Select, Table, MessagePlugin } from 'tdesign-react'
import TopSearch from './TopSearch'
import { ApiRequest, apis } from '@/service'
import styles from './index.module.less'

const {
  getCustomizeDictionaryArray,
  getDictionaryArray,
} = apis.BMService.system

const DictionaryTable = () => {

  const navigate = useNavigate()

  const [dictionaryValue, setDictionaryValue] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(false)
  const [pagination, setPagination] = useState<PageParamsType>({
    current: 1,
    pageSize: 5,
    paging: true
  })
  const [tableData, setTableData] = useState<any[]>([])
  const [total, setTotal] = useState<number>(0)

  const columns = [
    {
      colKey: 'label',
      title: '字典名称',
    },
    {
      colKey: 'value',
      title: '字典值',
    },
  ]

  useEffect(() => {
    getTableData()
  }, [dictionaryValue, pagination])

  const getTableData = () => {
    setLoading(true)
    if (!dictionaryValue) {
      const params = {
        dictionaryValue: 'Dictionary',
        ...pagination
      }
      ApiRequest({ api: getCustomizeDictionaryArray, params, errorCallback: () => { setLoading(false) }  }).then((res: ResponseDataType) => {
        const { code = -1, data = [], note = '', total = 0 } = res
        if (code > 0) {
          setTableData(data)
          setTotal(total)
        } else {
          MessagePlugin.error({
            content: note,
            placement: 'top-right',
            duration: 2000
          })
        }
        setLoading(false)
      })
    } else {
      const params = {
        dictionaryValue,
        ...pagination
      }
      ApiRequest({ api: getDictionaryArray, params }).then((res: ResponseDataType) => {
        const { code = -1, data = [], note = '', total = 0 } = res
        if (code > 0) {
          setTableData(data)
          setTotal(total)
        } else {
          MessagePlugin.error({
            content: note,
            placement: 'top-right',
            duration: 2000
          })
        }
        setLoading(false)
      })
    }
  }

  const toAddPage = () => {
    navigate('/aio/bug-manager/system/dictionary/add-dictionary')
  }

  const onSearch = (fields: any) => {
    setDictionaryValue(fields.dictionaryValue?.[0]?.value || '')
  }

  const onPageChange = (pageInfo: PageInfo) => {
    setPagination({
      ...pagination,
      pageSize: pageInfo.pageSize,
      current: pageInfo.current,
    })
  }

  return <div className={'content-wrapper'}>
    <Button onClick={toAddPage}>添加字典</Button>
    <Table
      className='bm-table'
      topContent={<TopSearch onSearch={onSearch} />}
      data={tableData}
      columns={columns}
      rowKey={'id'}
      verticalAlign={'top'}
      bordered={true}
      showHeader={true}
      tableLayout={'auto'}
      rowClassName={({ rowIndex }) => `${rowIndex}-class`}
      cellEmptyContent={'--'}
      resizable={false}
      size='small'
      loading={loading}
      pagination={{
        defaultCurrent: pagination.current,
        defaultPageSize: pagination.pageSize,
        total,
        showJumper: true,
        size: 'small',
        onChange: onPageChange,
        onCurrentChange(current, pageInfo) {
          console.log(current, pageInfo, 'onCurrentChange current');
        },
        onPageSizeChange(size, pageInfo) {
          console.log(size, pageInfo, 'onPageSizeChange size');
        },
      }}
      onPageChange={(pageInfo) => {
        console.log(pageInfo, 'onPageChange');
      }}
      onRowClick={({ row, index, e }) => {
        console.log('onRowClick', { row, index, e });
      }}
    />
  </div>
}

export default DictionaryTable
